<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        深度监视:
             (1).Vue中的watch默认不监测对象内部值的改变(一层监测)
             (2).配置deep:true就可以监测对象内部值改变(多层监测)
        备注:
             (1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
             (2).使用watch时候时根据数据的具体结构,来决定是否采取深度监视(为了执行效率,层级简单就不用开深度监视,层级复杂就手动开启)
     -->
    <div id="root">
        <!-- <h1>今天天气很{{info}}</h1>
        <button @click="change">点我</button> -->

        <h1>a的值是{{numbers.a}}</h1>
        <button @click="numbers.a++">点我a就加1</button> <br><br>
        <h1>b的值是{{numbers.b}}</h1>
        <button @click="numbers.b++">点我b就加1</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                isHoat: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            computed: {

                info() {
                    return this.isHoat ? '炎热' : '凉爽'
                }
            },
            methods: {
                change() {
                    this.isHoat = !this.isHoat
                }
            },
            watch: {
                isHoat: {

                    handler(newValue, oldValue) {
                        console.log('ishoat被修改了', newValue, oldValue);
                    }
                },

                // watch默认不监测对象内部值变化
                // 'numbers.a': {
                //     handler() {
                //         console.log('a 发生了改变');
                //     }
                // },
                // 'numbers.b': {
                //     handler() {
                //         console.log('b 发生了改变');
                //     }
                // },

                // 配置deep:true 则监测对象内部值变化 无论嵌套多少层级
                numbers: {
                    deep: true,
                    handler() {
                        console.log('使用了深度监视');
                    }
                }

            }
        })
    </script>
</body>

</html>